<template>
  <view>
    <view class="padd-left-right">
      <view class="spacing">
        <view class="con-display border-bottom">
          <view class="flex-left">处理人</view>
          <view class="flex-right">张瑶</view>
        </view>
        <view class="con-display border-bottom">
          <view class="flex-left">业务日期</view>
          <view class="flex-right">2021-10-25</view>
        </view>
        <view class="con-display border-bottom">
          <view class="flex-left">维修花费</view>
          <view class="flex-right">5000</view>
        </view>
        <view class="con-display border-bottom">
          <view class="flex-left">维修内容</view>
          <view class="flex-right">电磁</view>
        </view>
        <view class="con-display border-bottom">
          <view class="flex-left">备注</view>
          <view class="flex-right"></view>
        </view>
      </view>
    </view>
    <!-- 间隔槽 -->
    <u-gap height="20" bg-color="#edeaea"></u-gap>

    <view class="dis-flex">
      <view class="dis-left1-flex">
        <u-checkbox-group>
          <u-checkbox v-model="checked"></u-checkbox>
        </u-checkbox-group>
      </view>
      <view class="dis-left-flex">
        <u-image
          width="100rpx"
          height="100rpx"
          src="https://cdn.uviewui.com/uview/example/fade.jpg"
        ></u-image>
      </view>
      <view class="dis-center-flex line-break-exceeded">
        <view>资产名称：酒精123</view>
      </view>
      <view class="dis-right-flex line-break-exceeded">
        <view>序列号：EAD12345641636467799</view>
      </view>
    </view>

    <!-- 按钮 -->
    <view class="button-con">
      <view class="button-return">
        <view class="button" @click="submit">完成</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputForm: {
        name: "",
        time: "",
        spend: "",
        content: "",
        remarks: "",
      },
      checked: false,
    };
  },
  methods: {
    // 提交
    submit() {
      uni.navigateTo({
        url: "/pages/eam/Assets/Assets",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dis-flex {
  padding: 20rpx;
  border-bottom: 1px solid #ccc;
  display: flex;
  .dis-left1-flex {
    flex: 5%;
  }
  .dis-left-flex {
    flex: 20%;
  }
  .dis-center-flex {
    flex: 40%;
    padding: 0 10rpx;
  }
  .dis-right-flex {
    flex: 40%;
    padding: 0 10rpx;
    text-align: right;
  }
}

.con-display {
  display: flex;
  padding: 20rpx;

  .flex-left {
    flex: 1;
  }

  .flex-right {
    flex: 1;
    text-align: right;
  }

  .flex-left-custom {
    flex: 40%;
  }

  .flex-right-custom {
    flex: 60%;
  }
}

.color-blue {
  color: #007aff;
}
</style>
